<template>
	<el-row :gutter="15" class="panel-group">
		<el-col :xs="24" :sm="12" :lg="6" v-for="(leafItem, index) in props.menuList" :key="'leaf' + index">
			<div class="card-panel" @click="onClick(leafItem)">
				<div class="card-panel-icon-wrapper icon-common" :style="{ color: leafItem.meta.color }">
					<SvgIcon :name="leafItem.meta.icon" :size="24" />
				</div>
				<div class="card-panel-description">
					<div class="card-panel-text" :style="{ color: leafItem.meta.color }">
						{{ leafItem.meta.title }}
					</div>
				</div>
			</div>
		</el-col>
	</el-row>
</template>
<script lang="ts" setup name="commonMemuPage">
import { useRouter } from 'vue-router';
import { verifyUrl } from '@/utils/toolsValidate';
const router = useRouter();
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	menuList: {
		type: Array,
		default: () => [],
	},
});
const onClick = (val: any) => {
	router.push(val.path);
	if (verifyUrl(val.meta.isLink)) {
		const { origin, pathname } = window.location;
		if (verifyUrl(val.meta.isLink)) window.open(val.meta.isLink);
		else window.open(`${origin}${pathname}#${val.meta.isLink}`);
	}
};
</script>
<style scoped lang="scss">
.panel-group {
	.card-panel {
		font-size: 12px;
		position: relative;
		display: flex;
		justify-content: start;
		align-items: center;
		overflow: hidden;
		text-align: center;
		color: #666;
		background: #fff;
		box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.15);
		border-color: rgba(0, 0, 0, 0.15);
		border-radius: 6px;
        margin-bottom:20px;
		&:hover {
			.card-panel-icon-wrapper {
				color: #fff !important;
			}

			.icon-common {
				background: var(--el-color-primary);
			}
			.card-panel-description {
				.card-panel-text {
					color: var(--el-color-primary) !important;
				}
			}
		}
		.icon-common {
			height: 60px;
			width: 60px;
		}
		.card-panel-icon-wrapper {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all 0.38s ease-out;
			border-radius: 6px;
		}

		.card-panel-icon {
			float: left;
			font-size: 48px;
		}

		.card-panel-description {
			font-weight: bold;
			margin-left: 20px;

			.card-panel-text {
				line-height: 18px;
				color: rgba(0, 0, 0, 0.45);
				font-size: 16px;
			}
			.card-panel-num {
				font-size: 20px;
			}
		}
	}
}
</style>
